<template>
	<div class="main">
		<!-- <scroller> -->
		<div class="createTeastWrap flex-h">

			<div class="toper">
				<div class="top" @click="abss">
					<img class="imgIcon" src="~/static/iconsvgs/top_icon_back.png" alt="">
				</div>
				<!-- <go-back  :goes='false' ></go-back> -->
				<!-- <span>职业兴趣测试</span> -->
			</div>
			<div class="testBoxWrap flex1">
				<div class="testWrap">
					<div class="textbox">
						<!-- 职业兴趣测试 -->
						<div v-if="types==1">
							<zyxq-test></zyxq-test>
						</div>
						<div v-if="types==2">
							<zyjzg-test></zyjzg-test>
						</div>
						<div v-if="types==3">
							<mbti-test></mbti-test>
						</div>
						<div v-if="types==4">
							<dyzn-test></dyzn-test>
						</div>
						<div v-if="types==5">
							<grown-test></grown-test>
						</div>
					</div>


				</div>
			</div>

		</div>
		<div v-transfer-dom>
			<confirm v-model="show"  @on-confirm="onConfirm">
				<p style="text-align:center;">您的题目尚未做完，退出将不会保存已做题目，您确定要退出吗？</p>
			</confirm>
		</div>
	</div>
</template>
<script>
	import ls from 'store2';
	import {Confirm,
		TransferDomDirective as TransferDom} from 'vux'
	import {
		format
	} from '~/plugins/filter';
	import goBack from '~/components/goBack'
	// import specIssue from '~/components/specIssue'
	import zyxqTest from '~/components/testTool1'
	import zyjzgTest from '~/components/testTool2'
	import mbtiTest from '~/components/testTool3'
	import dyznTest from '~/components/testTool4'
	import grownTest from '~/components/testTool5'

	export default {
		head: {
			title: '生涯测评'
		},
		directives: {
			TransferDom
		},
		components: {
			goBack,
			zyxqTest,
			zyjzgTest,
			dyznTest,
			grownTest,
			mbtiTest,
			Confirm
		},
		created() {
			this.commonJs.gologins();
			this.types = ls.get('testTypes') * 1;
		},
		data() {
			return {
				types: 0,
				tabNum: 0,
				total: 100,
				show:false
			}
		},
		mounted: function() {
			switch (this.types) {
				case 1:
					this.total = 182
					break;
				case 2:
					this.total = 60
					break;
				case 3:
					this.total = 70
					break;
				case 4:
					this.total = 88
					break;
				case 5:
					this.total = 10
					break;
				default:
					this.total = 'C型(事务型)'
			}
			if(this.commonJs.isTerminal()=='isAndroid'){
			if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
		},
		destroyed() {
			window.removeEventListener('popstate', this.fun, false);
		},
		watch: {

		},
		methods: {
			fun() {
				this.$router.replace({
					path: '../evaluation/createTest'				
				})			
			},
			onConfirm(msg) { 
				// this.$router.go(-1);
				this.commonJs.gosto('../evaluation/createTest')
				console.log('on confirm')
			},
			abss() {
				this.show=true
				// this.commonJs.gosback(gos)
				console.log(12222)
			},

			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},

		},
		beforeDestroy() {

		}

	}
</script>

<style scoped lang="less">
	.top {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		padding: 0 0.3rem;
		box-sizing: border-box;

		.imgIcon {
			width: 0.4rem;
			height: 0.4rem;
		}

	}

	.createTeastWrap {
		width: 7.5rem;
		height: 100vh;
		background: rgba(250, 250, 250, 1);
		;
		overflow: hidden;
		flex-direction: column;

		.toper {
			width: 100%;
			height: auto;
		}

		.testBoxWrap {
			width: 7.5rem;
			height: 100%;

			.testWrap {
				width: 6.9rem;
				height: 98%;
				position: relative;
				background: rgba(255, 255, 255, 1);
				// background: red;
				box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
				margin: 0rem auto 0;
				z-index: 2;
				border-radius: 0.2rem;

				.textbox {
					width: 100%;
					height: auto;
					padding: 0.3rem 0.4rem;
					box-sizing: border-box;


					.titlesDrag {
						width: 100%;
						height: 0.8rem;
						margin-top: 0.5rem;

						.sp1,
						.sp2 {
							font-size: 0.26rem;
							font-weight: bold;
							box-sizing: border-box;
							height: 0.8rem;
						}

						.sp1 {
							width: 1.5rem;
							padding-top: 0.4rem;
							color: rgba(82, 196, 26, 1);

						}

						.sp2 {
							padding-top: 0.2rem;

							color: rgba(187, 187, 187, 1);

						}
					}

					.titlesDrag1 {
						height: 0.4rem;
						margin-top: 0;
						font-size: 0.3rem;

						.sp1,
						.sp2 {
							height: 0.4rem;
							padding-top: 0;
							color: rgba(187, 187, 187, 1);
						}
					}
				}

			}
		}


	}
</style>
